<template>
  <div class="flex-app-continer">
    <vxe-toolbar size='mini' :refresh='{ query: querySubDept }'>
      <template v-slot:buttons>
        <vxe-button status='primary' @click='$refs.xTable1.setAllTreeExpand(true)'>
          展开2
        </vxe-button>
        <vxe-button status='primary' @click='$refs.xTable1.clearTreeExpand()'>折叠2
        </vxe-button>
      </template>
    </vxe-toolbar>
    <div class="flex-app-continer-table-div">
      <vxe-table ref='xTable1' size='small'
                 style="overflow:auto;width: 100%;"
                 height='auto' auto-resize
                 :show-header="false"
                 transfer border show-header-overflow highlight-current-row show-overflow
                 highlight-hover-row
                 resizable
                 :tree-config="{lazy: true,expandAll:true, children: 'children', hasChild:'hasChild', line: true,  loadMethod: loadChildrenMethod}"
                 :checkbox-config="{ highlight: true, range: true, trigger: 'row' ,checkStrictly:true}"
                 :data='tableData'>
        <vxe-column align="center" type="checkbox" width="50"></vxe-column>
        <vxe-column align="left" type="seq" title="序号" width="60"></vxe-column>
        <vxe-column align='left' header-align='center' field='title' title='企业/部门名称'
                    tree-node></vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import {postAction} from "@/api/manage.js";

export default {
  name: "SysDepart",
  data() {
    return {
      tableData: [],
    }
  },
  props: {
    companyId: {
      type: String
    },
  },
  created() {
    this.querySubDept()
  },
  mounted() {
  },
  activated() {
  },
  methods: {
    getData() {
      return this.$refs.xTable1.getCheckboxRecords();
    },
    async querySubDept() {
      this.tableData = []
      let params = {}
      params.companyId = this.companyId
      params.self = true
      await postAction('/sys/user/querySubDepart', params).then(
        (res) => {
          if (res.code === '0') {
            this.tableData = res.result
          }
        }, (err) => {
        }
      )
    },
    async loadChildrenMethod({row}) {
      let params = {}
      params.key = row.id
      let data = []
      await postAction('/sys/user/querySubDepart', params).then(
        (res) => {
          if (res.code === '0') {
            data = res.result
          }
        }, (err) => {
        }
      )
      return Promise.resolve(data)
    },
  }
}
</script>

<style scoped>

</style>